<template>
  <el-row>
  	<el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
  	    <el-card :body-style="{ padding: '0px' }">
<!--  	      <img src="../../../assets/w.png" class="image">-->
           <img src="../../assets/images/w.png" class="image">
  		  <div style="padding: 12px;">
  	        <span>水果小拼盘</span>
  	        <div class="bottom clearfix">
  	          <h5>商品的价格：</h5>
  	          <el-button type="text" @click="innerVisible6 = true">立即购买</el-button>
  	                    <el-dialog title="购买页面" :visible.sync="innerVisible6">
  	                      <span>
<!--  	                        <img src="../../../assets/w.png" class="image">-->
                             <img src="../../assets/images/w.png" class="image">
  	                        <h2>数量：</h2>
  	                        <el-input-number v-model="product4.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
  	                        <h2>总价格:
  	                        </h2>
  	                       <el-input-number :value="product4.quantity*product4.price" :step="15"></el-input-number>
  	                      </span>
  	                      <el-dialog
  	                        width="30%"
  	                        title="结算页面"
  	                        :visible.sync="innerVisible"
  	                        append-to-body>
  	                        <span>
  	                          <el-button type="success" plain>支付宝</el-button>
  	                          <el-button type="success" plain>微信</el-button>
  	                          <el-button type="success" plain>其他方式</el-button>
  	                        </span>
  	                      </el-dialog>
  	                      <div slot="footer" class="dialog-footer">
  	                        <el-button @click="innerVisible6 = false">取 消</el-button>
  	                        <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
  	                      </div>
  	                    </el-dialog>
  	                </div>
  	              </div>
  	            </el-card>
  	          </el-col>


  	<el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
  	    <el-card :body-style="{ padding: '0px' }">
<!--  	      <img src="../../../assets/e.png" class="image">-->
           <img src="../../assets/images/e.png" class="image">
  		  <div style="padding: 12px;">
  	        <span>水果大拼盘</span>
  	        <div class="bottom clearfix">
  	          <h5>商品的价格：</h5>
  	          <el-button type="text" @click="innerVisible4 = true">立即购买</el-button>
  	                    <el-dialog title="购买页面" :visible.sync="innerVisible4">
  	                      <span>
<!--  	                        <img src="../../../assets/e.png" class="image">-->
                             <img src="../../assets/images/e.png" class="image">
  	                        <h2>数量：</h2>
  	                        <el-input-number v-model="product5.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
  	                        <h2>总价格:
  	                        </h2>
  	                       <el-input-number :value="product5.quantity*product5.price" :step="15"></el-input-number>
  	                      </span>
  	                      <el-dialog
  	                        width="30%"
  	                        title="结算页面"
  	                        :visible.sync="innerVisible"
  	                        append-to-body>
  	                        <span>
  	                          <el-button type="success" plain>支付宝</el-button>
  	                          <el-button type="success" plain>微信</el-button>
  	                          <el-button type="success" plain>其他方式</el-button>
  	                        </span>
  	                      </el-dialog>
  	                      <div slot="footer" class="dialog-footer">
  	                        <el-button @click="innerVisible4 = false">取 消</el-button>
  	                        <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
  	                      </div>
  	                    </el-dialog>
  	                </div>
  	              </div>
  	            </el-card>
  	          </el-col><br /><br /><br /><br />



  	<el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
  	    <el-card :body-style="{ padding: '0px' }">
<!--  	      <img src="../../../assets/z.png" class="image">-->
           <img src="../../assets/images/z.png" class="image">
  		  <div style="padding: 12px;">
  	        <span>烤羊肉串</span>
  	        <div class="bottom clearfix">
  	          <h5>商品的价格：</h5>
  	          <el-button type="text" @click="innerVisible7 = true">立即购买</el-button>
  	                    <el-dialog title="购买页面" :visible.sync="innerVisible7">
  	                      <span>
<!--  	                        <img src="../../../assets/z.png" class="image">-->
                             <img src="../../assets/images/z.png" class="image">
  	                        <h2>数量：</h2>
  	                        <el-input-number v-model="product6.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
  	                        <h2>总价格:
  	                        </h2>
  	                       <el-input-number :value="product6.quantity*product6.price" :step="15"></el-input-number>
  	                      </span>
  	                      <el-dialog
  	                        width="30%"
  	                        title="结算页面"
  	                        :visible.sync="innerVisible"
  	                        append-to-body>
  	                        <span>
  	                          <el-button type="success" plain>支付宝</el-button>
  	                          <el-button type="success" plain>微信</el-button>
  	                          <el-button type="success" plain>其他方式</el-button>
  	                        </span>
  	                      </el-dialog>
  	                      <div slot="footer" class="dialog-footer">
  	                        <el-button @click="innerVisible7 = false">取 消</el-button>
  	                        <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
  	                      </div>
  	                    </el-dialog>
  	                </div>
  	              </div>
  	            </el-card>
  	          </el-col>


  	<el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
  	    <el-card :body-style="{ padding: '0px' }">
<!--  	      <img src="../../../assets/r.png" class="image">-->
           <img src="../../assets/images/r.png" class="image">
  		  <div style="padding: 12px;">
  	        <span>烤牛排</span>
  	        <div class="bottom clearfix">
  	          <h5>商品的价格：</h5>
  	          <el-button type="text" @click="innerVisible5 = true">立即购买</el-button>
  	                    <el-dialog title="购买页面" :visible.sync="innerVisible5">
  	                      <span>
<!--  	                        <img src="../../../assets/r.png" class="image">-->
                             <img src="../../assets/images/r.png" class="image">
  	                        <h2>数量：</h2>
  	                        <el-input-number v-model="product7.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
  	                        <h2>总价格:
  	                        </h2>
  	                       <el-input-number :value="product7.quantity*product7.price" :step="15"></el-input-number>
  	                      </span>
  	                      <el-dialog
  	                        width="30%"
  	                        title="结算页面"
  	                        :visible.sync="innerVisible"
  	                        append-to-body>
  	                        <span>
  	                          <el-button type="success" plain>支付宝</el-button>
  	                          <el-button type="success" plain>微信</el-button>
  	                          <el-button type="success" plain>其他方式</el-button>
  	                        </span>
  	                      </el-dialog>
  	                      <div slot="footer" class="dialog-footer">
  	                        <el-button @click="innerVisible5 = false">取 消</el-button>
  	                        <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
  	                      </div>
  	                    </el-dialog>
  	                </div>
  	              </div>
  	            </el-card>
  	          </el-col>

  	<el-col :span="8" v-for="(o, index) in 1" :key="o" :offset="index > 0 ? 1 : 0">
  	    <el-card :body-style="{ padding: '0px' }">
<!--  	      <img src="../../../assets/t.png" class="image">-->
           <img src="../../assets/images/t.png" class="image">
  		  <div style="padding: 12px;">
  	        <span>醒酒丸</span>
  	        <div class="bottom clearfix">
  	          <h5>商品的价格：</h5>
  	          <el-button type="text" @click="outerVisible = true">立即购买</el-button>
  	                    <el-dialog title="购买页面" :visible.sync="outerVisible">
  	                      <span>
<!--  	                        <img src="../../../assets/t.png" class="image">-->
                             <img src="../../assets/images/t.png" class="image">
  	                        <h2>数量：</h2>
  	                        <el-input-number v-model="product8.quantity" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
  	                        <h2>总价格:
  	                        </h2>
  	                       <el-input-number :value="product8.quantity*product8.price" :step="15"></el-input-number>
  	                      </span>
  	                      <el-dialog
  	                        width="30%"
  	                        title="结算页面"
  	                        :visible.sync="innerVisible"
  	                        append-to-body>
  	                        <span>
  	                          <el-button type="success" plain>支付宝</el-button>
  	                          <el-button type="success" plain>微信</el-button>
  	                          <el-button type="success" plain>其他方式</el-button>
  	                        </span>
  	                      </el-dialog>
  	                      <div slot="footer" class="dialog-footer">
  	                        <el-button @click="outerVisible = false">取 消</el-button>
  	                        <el-button type="primary" @click="innerVisible = true">立即结算</el-button>
  	                      </div>
  	                    </el-dialog>
  	                </div>
  	              </div>
  	            </el-card>
  	          </el-col>
  </el-row>
</template>


<script>
export default {
	  data() {
	    return {

         outerVisible: false,
         innerVisible: false,
                innerVisible4: false,
                innerVisible5: false,
                innerVisible6: false,
                innerVisible7: false,
                innerVisible8: false,
                product4:{
                    price:15,
                    quantity:1
                },
               product5: {
                  price:20,
                  quantity:1
                },
                product6: {
                   price:25,
                   quantity:1
                 },
                 product7: {
                    price:30,
                    quantity:1
                  },
                  product8: {
                     price:30,
                     quantity:1
                   },
                  //num2:num1*15,
              };
            },
            methods: {
                  handleChange(value) {
                   // console.log(value);
                  }
                }

	}
</script>


<style>
.time {
	    font-size: 13px;
	    color: #ffaaff;
	  }

	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }

	  .button {
	    padding: 0;
	    float: right;
	  }

	  .image {
	    width: 100%;
	    display: block;
	  }

	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }

	  .clearfix:after {
	      clear: both
	  }

</style>
